<template>
  <div class="mybox">
    <div
      v-for="(item, index) in musiclist"
      class="musicitem flexrowbetween"
      :key="index"
      :class="{ bg: (index + 1) % 2 == 0 }"
    >
      <div class="f-14 c_000 flex aligncenter"><img src="@/assets/images/music.png" alt="" class="musicicon mr_10"> {{item.name}}</div>
      <div class="flex aligncenter">
        <!-- <i class="el-icon-caret-right f-22 c_000 commhover"></i> -->
        <el-button v-if="activeSrc == item.url" type="primary" class="ml_20" size="small" disabled>已选中</el-button>
        <el-button v-else type="primary" class="ml_20" size="small" @click="selectItem(item)">选择</el-button>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getMusciList"
    />
  </div>
</template>
<script>
import { sourceMusic } from "@/api/active";
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      total: 0,
      musiclist:[],
      activeSrc:''
    };
  },
  created() {
    this.activeSrc = this.src
    this.getMusciList();
  },
  props:{
    src:{
      default:''
    }
  },
  methods: {
    getMusciList() {
      sourceMusic().then((res) => {
        this.musiclist = res.data;
      });
    },

    selectItem(item){
      this.activeSrc = item.url
      this.$emit('changeImg',{type:'music_url',url:item.url})
    }
  },
};
</script>
<style lang="scss" scoped>
.mybox{
  height: 550px;
  overflow-y:auto
}
.musicitem{
  padding: 10px;
  &:hover{
    background-color: #F3F3F4;
  }
}
.bg{
  background-color: #F3F3F4;
}
</style>